<template>
    <div class="page has-navbar custompackage">
        <von-header>
            <button class="button button-icon ion-ios-arrow-back" slot="left" @click="$router.go(-1)"></button>
            <span slot="title" class="custompackage-tilte">定制包团</span>
        </von-header>
        <div class="page-content">
            <img src="../assets/image/custom-package-header-banner.jpg" alt="">
            <div class="custompackage-content">
                <div class="cs-list"><i class="ion-ios-location-outline"></i><input type="text" placeholder="请填写目的地" v-model="text1"></div>
                <div class="cs-list"><i class="ion-ios-navigate-outline"></i><input type="text" placeholder="请填写出发地" v-model="text2"></div>
                <div class="cs-list"><i class="ion-ios-calendar-outline"></i>
                    <!--<datepicker label="出发日期" date-format="yyyy-mm-dd">-->

                            <input type="text" placeholder="请填写出发日期" v-model="text3">

                    <!--</datepicker>-->
                </div>
                <div class="cs-list"><i class="ion-android-sunny"></i><input type="text" placeholder="请填写游玩天数" v-model="text4"></div>
                <div class="cs-list cs-list5">
                    <i class="ion-ios-person-outline"></i>
                    <div class="adult"><p>成人</p><span class="decrease" @click="decrease1()">-</span><span class="count count1">1</span><span class="increase" @click="increase1()">+</span></div>
                    <div class="children"><p>儿童</p><span class="decrease" @click="decrease2()">-</span><span class="count count2">0</span><span class="increase" @click="increase2()">+</span></div>
                </div>
                <div class="cs-list"><i class="ion-social-usd-outline"></i><input type="text" placeholder="请填写人均预算"  v-model="text5"></div>
            </div>
            <div class="cp-footer" :class="{activee: text1&&text3}" @click="ljdz()">立即定制</div>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                count1:1,
                count2:0,
                text1:'',
                text2:'',
                text3:'',
                text4:'',
                text5:'',
            }
        },
        methods:{
            decrease1(){
                if(this.count1>1){
                    this.count1--
                    $('.count1').html(this.count1)
                }
            },
            increase1(){
                if(this.count1<10){
                    this.count1++
                    $('.count1').html(this.count1)
                }
            },
            decrease2(){
                if(this.count2>=1){
                    this.count2--
                    $('.count2').html(this.count2)
                }
            },
            increase2(){
                if(this.count2<10){
                    this.count2++
                    $('.count2').html(this.count2)
                }
            },
            ljdz(){
                if($('.cp-footer').hasClass('activee')){
                    this.$router.push('/customPackageSubmit')
                }
            }
        },

        created(){

        }
    }
</script>
<style>
    .cp-footer.activee{
        background: #0090f2;
    }
    .custompackage .bar.bar-header{
        box-shadow: none;
        background: transparent;
    }
    .custompackage-tilte,.custompackage .button.button-icon.ion-ios-arrow-back{
        color: #fff;
    }
    .custompackage img{
        display: inline-block;
        width:100%;
        position: fixed;
        top:0;
    }
    .cp-footer{
        position: fixed;
        bottom:0;
        width:100%;
        height:50px;
        line-height: 50px;
        text-align: center;
        font-size:20px;
        background: #c4c4c4;
        color: #fff;
    }
    .custompackage-content{
        padding: 0;
        overflow: hidden;
        margin-top: 210px;
        margin-bottom: 24px;
    }
    .cs-list{
        margin-bottom:24px;
        overflow: hidden;
        height: 32px;
        line-height: 32px;
        padding: 0 24px;
        border: none;
        font-size: 14px;
    }
    .cs-list i{
        width:30px;
        display: inline-block;
        float: left;
        font-size:30px;
        margin-right:12px;
    }
    .cs-list input{
        display: inline-block;
        float: left;
    }
    .cs-list5 div{
        width:40%;
        float: left;
    }
    .cs-list5 p{
        float: left;
        margin-right:5px;
    }
    .cs-list5 span{
        display: block;
        width: 29px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        float: left;
        border:1px solid #a6a6a6;
    }
    .cs-list5 span.decrease{
        border-radius: 4px 0 0 4px;
    }
    .cs-list5 span.count{
        border-left: none;
        border-right: none;
    }
    .cs-list5 span.increase{
        border-radius: 0px 4px 4px 0;
    }
    .datepicker{
        font-size:12px;
        color: #999;
    }
</style>